Skip to content

fix(filterChip): fix for breaking date type filterchip, width wrapping, and text value date#821

Merged
Shreyag02 merged 9 commits into
mainfrom
fix/filter-chip/date-input-issues
Jun 2, 2026
Merged

fix(filterChip): fix for breaking date type filterchip, width wrapping, and text value date#821
Shreyag02 merged 9 commits into
mainfrom
fix/filter-chip/date-input-issues

Conversation

@Shreyag02
Copy link
Copy Markdown
Contributor

@Shreyag02 Shreyag02 commented May 27, 2026

Fixes the date-type FilterChip, makes its value fields hug and truncate to their content,and cleans up the surrounding filter toolbars in DataTable/DataView.

After PR #819 made DatePicker.value strictly Date | undefined and added a controlled-sync effect keyed on valueProp?.getTime(), the date filter chip crashed: FilterChip seeds its value state with '' and forwarded that string to the picker, so ''.getTime() threw TypeError: valueProp?.getTime is not a function (caught by the ErrorBoundary, regenerating the tree).

Changes:

Change Details
Fix the crash & parse serialized dates The date field runs its value through toDateValue(): a Date passes through, a string or epoch number (e.g. filter state hydrated from a URL/query) is parsed via dayjs, and only an unparseable value starts on the "Select date" placeholder instead of throwing.
Migrate to slotProps.input Off the inputProps API #819 deprecated.
New calendarProps prop Mirrors the selectProps pattern: forwards arbitrary DatePicker props (dateFormat, timeZone, slotProps.calendar, …) for columnType="date"; value/onSelect/defaultValue/children stay owned by FilterChip. DataTable/DataView columns gain a parallel filterProps.calendar slot. The picker-level dateFormat default is now 'DD MMM YYYY', so the capture-date filter reads "27 May 2026" instead of "27/05/2026".
Content-fit width & truncation The value input itself hugs its content (field-sizing: content, width: auto fallback) and is the element that shrinks under toolbar resize pressure — so text-overflow: ellipsis fires with side padding intact instead of the wrapper clipping both away. min-width: 50px keeps an empty value clickable across the whole visible area; max-width: 200px caps runaway values. (Input-level approach aligned with draft #826.)
Chips wrap to the panel DataTable's .filterContainer and DataView's filters row fill the toolbar (flex: 1; min-width: 0; flex-wrap: wrap) so applied chips wrap and shrink instead of overflowing in a single row.
DataTable filter fixes Adding a select filter with no filterOptions no longer crashes (options[0]?.value); multiselect filters preselect the first option like select does ([] when there are no options) instead of falling through to ''; classNames.addFilter is now actually applied to the default add-filter triggers.
Cleanups & public types Removed a dead selectColumn class reference left behind by #810. Exported the supporting types from the package root: FilterChipProps, FilterChipCalendarProps, FilterChipValue, DatePickerProps, DatePickerSlotProps.
Docs New "Calendar, DatePicker & RangePicker" and "FilterChip" sections in V1-migration.md; CHANGELOG entries under 0.49.0 (amended #819 items + a dedicated section for this PR). multiselect is now documented end to end: FilterChip props/demo tabs/playground control, DataTableColumnDef.filterType + operators in the datatable docs, FiltersProps.classNames, and a working multiselect Team filter in /examples/datatable.

Behavior notes:

  • Existing date FilterChips display month-as-text by default — overridable per chip via calendarProps={{ dateFormat: '…' }}.
  • A date chip driven by a string/epoch value now displays the parsed date (previously rendered blank).
  • A freshly added multiselect filter starts with the first option preselected, matching select behavior (previously '').

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Refactor (no functional changes, no bug fixes just code improvements)
  • Chore (changes to the build process or auxiliary tools and libraries such as documentation generation)
  • Style (changes that do not affect the meaning of the code (white-space, formatting, etc))
  • Test (adding missing tests or correcting existing tests)
  • Improvement (Improvements to existing code)
  • Other (please specify)

How Has This Been Tested?

Check Result
Unit tests in filter-chip.test.tsx 12 → 20, all passing: no-crash regression for an unset date chip, string-date parsing ('2026-05-27' → "27 May 2026"), epoch-number parsing, unparseable-value fallback to unselected, default month-as-text formatting, custom dateFormat via calendarProps, and fluid-container wiring on both the string and date fields.
Full @raystack/apsara Vitest suite Passes — 1,861 tests across 77 files; filter-chip + data-table + calendar together: 262/262.
tsc --noEmit No errors in any touched file (the repo's 12 pre-existing errors in untouched data-table/data-view files are unchanged).
Biome lint Clean for all touched files (only the 2 pre-existing any warnings in the original useCallbacks; no new warnings).
Manual Resize-pressure behavior (ellipsis, padding, clickable floor, chip wrapping) verified in the /examples/datatable and dataview example pages.

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation (.mdx files)
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works

Screenshots (if appropriate):

[Add screenshots here]

Related Issues

[Link any related issues here using #issue-number]

@vercel
Copy link
Copy Markdown

vercel Bot commented May 27, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
apsara Ready Ready Preview, Comment Jun 2, 2026 9:34am

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 27, 2026

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

This PR migrates calendar/input props to a unified slotProps API across DatePicker and RangePicker, exports DatePicker prop/slot types, changes the default dateFormat to "DD MMM YYYY", and updates tests accordingly. FilterChip gains a typed calendarProps prop, now coerces non-Date values to undefined before passing value to DatePicker, and switches to slotProps for input sizing with content-fit CSS. DataTable/DataView filter definitions propagate calendarProps to FilterChip. Docs, demos, examples, and changelog are updated.

Suggested reviewers

  • paanSinghCoder
  • rsbh
  • rohanchkrabrty
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly identifies the main changes: fixing a crash in date-type FilterChip, addressing width wrapping issues, and updating the date value formatting (month-as-text). It directly reflects the primary objectives of the PR.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description check ✅ Passed The pull request description clearly relates to the changeset, describing fixes and improvements to the FilterChip date-type component, migrations to slotProps, new calendarProps functionality, content-fit width improvements, toolbar wrapping, and documentation updates.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Comment thread apps/www/src/content/docs/components/filter-chip/props.ts Outdated
Comment thread packages/raystack/components/filter-chip/filter-chip.module.css
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
packages/raystack/components/filter-chip/filter-chip.tsx (1)

167-168: 💤 Low value

showCalendarIcon={false} is overridable via calendarProps.

It's placed before {...calendarProps}, so a consumer passing calendarProps={{ showCalendarIcon: true }} would re-enable the icon — unlike value/onSelect, which are locked after the spread. If the chip is meant to always suppress the calendar icon, move it after the spread (or exclude showCalendarIcon from FilterChipCalendarProps).

♻️ Lock the icon suppression
             <DatePicker
-              showCalendarIcon={false}
               {...calendarProps}
+              showCalendarIcon={false}
               value={filterValue instanceof Date ? filterValue : undefined}
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/raystack/components/filter-chip/filter-chip.tsx` around lines 167 -
168, The showCalendarIcon prop is being overridden because in FilterChip's JSX
the literal showCalendarIcon={false} is placed before the spread of
calendarProps; update the FilterChip component so the suppression is locked by
either moving showCalendarIcon={false} after {...calendarProps} in the element
rendering, or remove/omit showCalendarIcon from the FilterChipCalendarProps type
so consumers cannot pass it; locate the render of the calendar (the element
receiving {...calendarProps}) in FilterChip (and adjust the calendarProps
type/interface if you choose the type-level fix).
apps/www/src/content/docs/components/filter-chip/demo.ts (1)

141-155: calendarPropsDemo is already consumed by the docs—it's imported and rendered via <Demo data={calendarPropsDemo} /> in apps/www/src/content/docs/components/filter-chip/index.mdx, so it’s not dead duplication. If the goal is to avoid duplicated code blocks, compare the code string against the inline “Date with calendarProps” tab content.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/www/src/content/docs/components/filter-chip/demo.ts` around lines 141 -
155, The calendarPropsDemo code block is duplicated by the inline “Date with
calendarProps” tab in the docs; locate calendarPropsDemo in demo.ts and the
inline tab content rendered in index.mdx and remove the duplication by reusing
one source: either import and render calendarPropsDemo via <Demo
data={calendarPropsDemo} /> inside the “Date with calendarProps” tab or replace
calendarPropsDemo.code with the unique content from the tab so only one
canonical code snippet exists; update references to the Demo component or the
tab content accordingly (symbols: calendarPropsDemo, <Demo>, “Date with
calendarProps” tab).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/www/src/content/docs/components/filter-chip/demo.ts`:
- Around line 141-155: The calendarPropsDemo code block is duplicated by the
inline “Date with calendarProps” tab in the docs; locate calendarPropsDemo in
demo.ts and the inline tab content rendered in index.mdx and remove the
duplication by reusing one source: either import and render calendarPropsDemo
via <Demo data={calendarPropsDemo} /> inside the “Date with calendarProps” tab
or replace calendarPropsDemo.code with the unique content from the tab so only
one canonical code snippet exists; update references to the Demo component or
the tab content accordingly (symbols: calendarPropsDemo, <Demo>, “Date with
calendarProps” tab).

In `@packages/raystack/components/filter-chip/filter-chip.tsx`:
- Around line 167-168: The showCalendarIcon prop is being overridden because in
FilterChip's JSX the literal showCalendarIcon={false} is placed before the
spread of calendarProps; update the FilterChip component so the suppression is
locked by either moving showCalendarIcon={false} after {...calendarProps} in the
element rendering, or remove/omit showCalendarIcon from the
FilterChipCalendarProps type so consumers cannot pass it; locate the render of
the calendar (the element receiving {...calendarProps}) in FilterChip (and
adjust the calendarProps type/interface if you choose the type-level fix).

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cfabe3ba-193d-4608-a362-c58abd50f44a

📥 Commits

Reviewing files that changed from the base of the PR and between ff63a6d and da50cd7.

📒 Files selected for processing (19)
  • apps/www/src/content/docs/components/calendar/props.ts
  • apps/www/src/content/docs/components/datatable/props.ts
  • apps/www/src/content/docs/components/filter-chip/demo.ts
  • apps/www/src/content/docs/components/filter-chip/index.mdx
  • apps/www/src/content/docs/components/filter-chip/props.ts
  • docs/V1-migration.md
  • packages/raystack/CHANGELOG.md
  • packages/raystack/components/calendar/__tests__/date-picker.test.tsx
  • packages/raystack/components/calendar/__tests__/range-picker.test.tsx
  • packages/raystack/components/calendar/date-picker.tsx
  • packages/raystack/components/calendar/index.tsx
  • packages/raystack/components/calendar/range-picker.tsx
  • packages/raystack/components/data-table/components/filters.tsx
  • packages/raystack/components/data-table/data-table.types.tsx
  • packages/raystack/components/data-view-beta/components/filters.tsx
  • packages/raystack/components/data-view-beta/data-view.types.tsx
  • packages/raystack/components/filter-chip/__tests__/filter-chip.test.tsx
  • packages/raystack/components/filter-chip/filter-chip.tsx
  • packages/raystack/components/filter-chip/index.tsx
✅ Files skipped from review due to trivial changes (6)
  • packages/raystack/components/calendar/index.tsx
  • packages/raystack/components/filter-chip/index.tsx
  • apps/www/src/content/docs/components/filter-chip/index.mdx
  • packages/raystack/CHANGELOG.md
  • apps/www/src/content/docs/components/calendar/props.ts
  • docs/V1-migration.md
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/www/src/content/docs/components/filter-chip/props.ts
  • packages/raystack/components/filter-chip/tests/filter-chip.test.tsx

Comment thread packages/raystack/components/data-table/components/filters.tsx Outdated
Comment thread packages/raystack/components/data-table/hooks/useFilters.tsx
@Shreyag02 Shreyag02 merged commit c0bc3a0 into main Jun 2, 2026
5 checks passed
@Shreyag02 Shreyag02 deleted the fix/filter-chip/date-input-issues branch June 2, 2026 09:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants